<template>
  <section>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>机构管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- -------------------------------------------查询条件--------------------------------------------- -->
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getUsers">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- -------------------------------------------学生列表--------------------------------------------- -->
    <el-table
      highlight-current-row
      :data="tableData"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column
        prop="orgName"
        label="机构名称"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="orgCode"
        label="机构编号"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :formatter="formatter">
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger">批量删除</el-button>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total"
                     style="float:right;">
      </el-pagination>
    </el-col>
  </section>
</template>

<script>
  const generator = require('great-generator');
  import OrganizationModel from './organization.model';
  console.log(new OrganizationModel());
  export default {
    name: 'organization',
    data() {
      const org = this.$route.params;
      let orgList = [{
        date: generator.GTimeUtils.str(),
        orgName: generator.GPersonUtils.randomName(),
        orgCode: generator.GCodeUtils.letter({prefix:'2021-', length:4}),
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: generator.GTimeUtils.str(),
        orgName: generator.GPersonUtils.randomName(),
        orgCode: generator.GCodeUtils.letter({prefix:'2021-', length:4}),
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: generator.GTimeUtils.str(),
        orgName: generator.GPersonUtils.randomName(),
        orgCode: generator.GCodeUtils.letter({prefix:'2021-', length:4}),
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: generator.GTimeUtils.str(),
        orgName: generator.GPersonUtils.randomName(),
        orgCode: generator.GCodeUtils.letter({prefix:'2021-', length:4}),
        address: '上海市普陀区金沙江路 1516 弄'
      }];
      if(org && org.formData && org.formData.orgName){
        orgList = [org.formData, ...orgList];
      }
      console.log(orgList);
      return {
        filters: {
          name: ''
        },
        total: 100,
        tableData: orgList
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      //获取用户列表
      getUsers() {

      },
      //显示新增界面
      handleAdd: function () {
        this.$router.push({name: 'organizationForm'});
      },
      //编辑
      handleEdit: function (index, data) {
        this.$router.push({
          name: 'organizationForm',
          params: data
        });
      },
      //删除
      handleDel: function (index, row) {
        if (Array.isArray(this.tableData)) {
          this.tableData.splice(index, 1);
        }
        console.log(this.tableData);
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getUsers();
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .search-box {
    line-height: 30px;
  }

  .el-main {
    line-height: 30px;
  }
</style>
